<template>
	<view class="head-bg"></view>
	<view class="page-content">
		<!-- 基本信息 -->
		<view v-if="userStore.userInfo" class="user-info">
			<wd-img style="border: 1px solid #eee" width="120rpx" height="120rpx"
				:src="utils.getAvatarPath(userStore.userInfo.avatar)" round />
			<view class="right-wrap">
				<view class="nickname">{{ userStore.userInfo.nickname }}</view>
				<view class="id">ID:{{ userStore.userInfo.sn }}</view>
				<view class="intro">{{ userStore.userInfo.introduction || '这人很懒，没有留下什么...' }}</view>
			</view>
			<wd-icon @click="jumpEditProfile" name="view-list" size="22px"></wd-icon>
		</view>
		<view v-else style="padding: 30rpx">
			<wd-button @click="utils.doLogin()" type="info" block>登录</wd-button>
		</view>
		<!-- 统计区块 -->
		<view class="count-wrap">
			<view class="count-item">
				<view class="num">{{ userStore.userInfo?.follow_count || 0 }}</view>
				<view class="desc">关注</view>
			</view>
			<view class="count-item">
				<view class="num">{{ userStore.userInfo?.fans_count || 0 }}</view>
				<view class="desc">粉丝</view>
			</view>
			<view class="count-item">
				<view class="num">{{ userStore.userInfo?.post_thumb_count || 0 + userStore.userInfo?.post_collect_count
					|| 0 }}</view>
				<view class="desc">获赞与收藏</view>
			</view>
		</view>
		<!-- 主要内容块 -->
		<view class="content-wrap">
			<!-- tabs -->
			<wd-tabs v-model="tabIndex" slidable="always" @change="handleTabChange" auto-line-width animated swipeable>
				<block v-for="(item, index) in tabList" :key="item">
					<wd-tab :title="item.title">
						<view class="content">
							<q-post-list v-if="index === 0" :postList="item.postList"
								:loadStatus="loadStatus"></q-post-list>
							<q-post-list v-else-if="index === 1" :postList="item.postList"
								:loadStatus="loadStatus"></q-post-list>
							<q-post-list v-else-if="index === 2" :postList="item.postList"
								:loadStatus="loadStatus"></q-post-list>
						</view>
					</wd-tab>
				</block>
			</wd-tabs>
		</view>
	</view>
	<q-tabbar :selected="4"></q-tabbar>
</template>

<script setup>
import { onLoad, onShow, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { useUserStore } from '@/store/user';
import { baseAPI } from '@/api/index.js';
import utils from '@/utils/utils.js';

//页面公共变量

const userStore = useUserStore();

const tabIndex = ref(0);
const loadStatus = ref('loading');

const tabList = ref([
	{
		title: '动态',
		page: 1,
		postList: []
	},
	{
		title: '点赞',
		page: 1,
		postList: []
	},
	{
		title: '收藏',
		page: 1,
		postList: []
	}
]);

// 页面生命周期

onLoad(() => {
	if (userStore.userInfo) {
		getUserPost();
	}
});
onShow(() => {
	getUserInfo();
});

onPullDownRefresh(() => {
	tabList.value.forEach((item) => {
		item.page = 1;
		item.postList = [];
	});

	getUserPost();
});

onReachBottom(() => {
	tabList.value[tabIndex.value].page++;
	getUserPost();
});

// 页面公共函数

function handleTabChange({ index }) {
	tabIndex.value = index;

	const length = tabList.value[index].postList.length;

	if (index === 0 && length === 0) {
		getUserPost();
	}

	if (index === 1 && length === 0) {
		getLikes();
	}

	if (index === 2 && length === 0) {
		getFavorites();
	}
}

function getUserPost() {
	loadStatus.value = 'loading';
	baseAPI
		.get('post/currentUser', {
			page: tabList.value[0].page
		})
		.then((res) => {
			if (res.code === 200) {
				tabList.value[0].postList = tabList.value[0].postList.concat(res.result.list);
				loadStatus.value = res.result.hasMore ? 'more' : 'nomore';
			}
		});
}

function getFavorites() {
	loadStatus.value = 'loading';
	baseAPI.get('post/favorites').then((res) => {
		if (res.code === 200) {
			tabList.value[1].postList = tabList.value[1].postList.concat(res.result.list);
			loadStatus.value = res.result.hasMore ? 'more' : 'nomore';
		}
	});
}

function getLikes() {
	loadStatus.value = 'loading';
	baseAPI.get('post/likes').then((res) => {
		if (res.code === 200) {
			tabList.value[2].postList = tabList.value[2].postList.concat(res.result.list);
			loadStatus.value = res.result.hasMore ? 'more' : 'nomore';
		}
	});
}

function getUserInfo() {
	baseAPI.get('user/getInfo').then((res) => {
		if (res.code == 200) {
			userStore.setUserInfo(res.result);
		}
	});
}

function jumpEditProfile() {
	uni.navigateTo({
		url: '/pages/user/profile-edit'
	});
}
</script>

<style lang="scss" scoped>
.head-bg {
	width: 100%;
	height: 500rpx;
	position: absolute;
	background-image: linear-gradient(rgba($-color-theme, 0.5), #f5f5f5);
	z-index: 1;
}

.page-content {
	position: relative;
	z-index: 10;
	padding-top: calc(var(--status-bar-height) + 120rpx);
}

.user-info {
	padding: $base-spacing;
	display: flex;
	align-items: center;

	.right-wrap {
		flex: 1;
		margin-left: 20rpx;

		.nickname {
			font-weight: 600;
			margin-bottom: 5rpx;
		}

		.id {
			font-size: 20rpx;
			color: #616161;
		}

		.intro {
			margin-top: 8rpx;
			font-size: 24rpx;
			color: #616161;
			line-height: 1.4;
			word-break: break-word;
		}
	}
}

.count-wrap {
	margin-top: 100rpx;
	display: flex;
	align-items: center;
	// background-color: #fff;
	border-radius: $base-radius;
	padding: $base-spacing;
	margin: $base-spacing;

	.count-item {
		flex: 1;
		text-align: center;

		.num {
			font-weight: 600;
		}

		.desc {
			font-size: 24rpx;
			color: #616161;
		}
	}
}

.content-wrap {
	border-radius: 30rpx 30rpx 0 0;
	overflow: hidden;

	.content {
		min-height: 60vh;
		padding: 20rpx;
	}
}
</style>
